
import React from 'react'
import { Layout, Menu } from 'antd'
import { observer } from "mobx-react"
import myinfo from '../mobx/info'

import { routerList } from '../../utils/router'

import { withRouter } from 'react-router-dom'

const { Sider } = Layout
const { SubMenu } = Menu
function MenuCpt({ history, location }: any) {
    console.log(location);

    const { collapsed, userInfo } = myinfo
    // const { role } = userInfo
    console.log(userInfo);


    const createMenuItem = (list: any) => {
        const { role } = userInfo
        if (userInfo) {
            return list.map((l: any) => {
                if (l.children) {
                    // 递归
                    if (l.permissions <= role) {
                        return (
                            <SubMenu key={l.path} title={l.text} icon={l.icon} style={{ background: "#7ec1ff" }}>
                                {createMenuItem(l.children)}
                            </SubMenu>
                        )
                    } else {
                        return null
                    }
                } else {
                    if (l.permissions <= role) {
                        return <Menu.Item key={l.path} icon={l.icon} style={{ background: "#7ec1ff" }}>{l.text}</Menu.Item>
                    } else {
                        return null
                    }
                }
            })
        } else {
            return null
        }
    }


    const menyClick = ({ item, key }: any) => {
        history.push(key)
    }

    return (
        <Sider style={{ padding: "0px 0", background: "#7ec1ff" }} collapsed={collapsed}>
            <div style={{ width: "100%", padding: 20, boxSizing: "border-box" }}>
                <img src="" style={{ width: "100%", height: "100%" }} alt="" />
            </div>
            <Menu
                defaultSelectedKeys={[location.pathname]}
                defaultOpenKeys={[location.pathname.split("/").splice(0, 3).join("/")]}
                mode="inline"
                theme="light"
                style={{ background: "#7ec1ff" }}
                onClick={menyClick}

            >
                {
                    userInfo && createMenuItem(routerList)
                }
            </Menu>
        </Sider>
    )
}

export default withRouter(observer(MenuCpt))